<template>
  <div class="sub">
    <el-card class="card">
      <el-form
        class="form"
        label-width="70px"
        :model="form"
        :rules="rules"
        ref="form"
      >
        <el-form-item label="学科编号">
          <el-input v-model="form.rid"></el-input>
        </el-form-item>
        <el-form-item label="学科名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model="form.short_name"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="请选择" v-model="form.status">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="clear">清除</el-button>
        <el-button type="primary" @click="addEvent">+新增学科</el-button>
      </el-form>
    </el-card>

    <el-card class="card">
      <el-table class="table" :data="tableData">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="rid" label="学科编号"></el-table-column>
        <el-table-column prop="name" label="学科名称"></el-table-column>
        <el-table-column prop="short_name" label="学科简称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="update_time" label="创建日期"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template v-slot="{ row }">
            <div :class="{ red: row.status == 0 }">
              {{ row.status == 0 ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button type="text" @click="disbale(row)">
                {{ row.status == 0 ? '启用' : '禁用' }}
              </el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="page.page"
          :page-sizes="[1, 2, 5, 10, 20]"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- <Add :isAshow.sync="isshow" ref="Add"/> -->
    <add :isshow.sync="isshow" @getData="getData" ref="add" />
  </div>
</template>

<script>
import add from './components/add.vue'

import { subjectList, subjectStatus, subjectRemove } from '@/api/subject.js'

export default {
  components: { add },
  data () {
    return {
      page: {
        total: 1, // 总条数
        page: 1, // 页码
        limit: 1 // 页容量
      },
      options: [
        {
          value: 1,
          label: '启用'
        },
        { value: 0, label: '禁用' }
      ],
      value: '',
      tableData: [
        {
          rid: '',
          name: '',
          short_name: '',
          intro: '',
          remark: '',
          limit: '',
          username: '',
          status: '',
          page: ''
        }
      ],
      isshow: false,
      mode: 'add',

      form: {
        rid: '',
        name: '',
        short_name: '',
        intro: '',
        remark: '',
        status: ''
      },
      rules: {}
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      console.log(this.form)
      const res = await subjectList({ ...this.page, ...this.form })
      // console.log(res)
      this.tableData = res.data.data.items
      this.page.total = res.data.data.pagination.total
      // console.log('学科列表', res, this.tableData)
    },
    sizeChange (size) {
      this.page.limit = size
      // 页容量改变时最好都回到第一页
      this.page.page = 1
      this.getData()
    },
    pageChange (page) {
      this.page.page = page
      this.getData()
    },

    addEvent () {
      this.isshow = true

      this.$refs.add.mode = 'add'
    },
    edit (row) {
      this.isshow = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      console.log('row', row)
      this.getData()
    },
    // 状态区分
    async disbale (data) {
      console.log(data)
      const newData = {
        id: data.id,
        status: data.status === '启用' ? 0 : 1
      }
      console.log(newData)
      const res = await subjectStatus(newData)
      console.log(res)
      this.$message.success('修改状态成功')
      this.getData()
    },
    async del (id) {
      await subjectRemove(id)
      this.$message.success('删除成功')
      this.getData()
    },
    clear () {
      this.form = {
        rid: '',
        name: '',
        short_name: '',
        intro: '',
        remark: '',
        status: ''
      }
    },
    doLayout (row) {
      // status: data.status === '禁用' ? 0 : 1
    },
    async search () {
      this.getData()
      // console.log('row', row)
      // const res = await subjectStatus(row)
      // console.log('结果', res)
      // if(this.data.status=='0'){
      //   this.data.status='禁用'
      // }else if(this.data.status=='1'){
      //   this.data.status='启用'
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.sub{
  width: 100%;
    // display: flex;
}
.card {
  display: flex;
  // width: 100%;
  // margin-left: 10px;
  .form {
    display: flex;
    margin-right: 8px;
    // width:1470px;
  }
  .table {
    flex: 1;
    width: 1429px;
  }

  .el-button {
    height: 39px;
    margin-left: 10px;
  }
  .el-input {
    width: 150px;
  }
  .page {
    text-align: center;
  }
}
::v-deep .el-dialog__header {
  background: linear-gradient(to right, #02c3fa, #1299fa);

  .el-icon-close:before {
    color: #fff;
  }

  .el-dialog__title {
    color: #fff;
  }
}
.red {
  color: red;
}
</style>
